<script setup>
import {showToast} from 'vant';
import {useRouter} from "vue-router";

const router = useRouter();
//点击左侧的返回自动返回到 ‘/’ 目录
//将BasicLayout.vue中onClickLeft方法中的router.push("/")改为router.back()，表示返回上一层页面
const onClickLeft = () => {
  // router.push('/');
  router.back();
};
// 点击右侧的搜索按钮进入搜索页
const onClickRight = () => {
  // 跳转页面
  router.push("/search");
};
// 引入底部导航栏
const onChange = (index) => showToast(`标签 ${index}`);
</script>

<template>
  <!--  布局-->
  <van-nav-bar
      title="标题"
      right-text="按钮"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
  >
    <!--    用搜索框替换掉右边的按钮-->
    <template #right>
      <van-icon name="search" size="18"/>
    </template>
  </van-nav-bar>

  <!--  引入底部导航栏-->
  <van-tabbar route @change="onChange">
    <van-tabbar-item to="/" icon="home-o" name="index">主页</van-tabbar-item>
    <van-tabbar-item to="/team" icon="search" name="team">组队</van-tabbar-item>
    <van-tabbar-item to="/user" icon="friends-o" name="user">个人</van-tabbar-item>
  </van-tabbar>
  <!--  定义条件判断，根据不同的active跳转到不同的页面-->
  <div id="content">
    <router-view/>
  </div>
</template>

<style scoped>

</style>